chore: replace legacy pan handler with new Gesture API in audio seekbar by divyanshu-patil · Pull Request #6884 · RocketChat/Rocket.Chat.ReactNative

divyanshu-patil · 2026-01-05T20:23:22Z

Proposed changes

This PR migrates the audio seekbar pan gesture from the legacy useAnimatedGestureHandler API to the new Gesture Builder API provided by react-native-gesture-handler

The refactor removes the deprecated context-based gesture handler and replaces it with a modern, composable Gesture.Pan() implementation while preserving existing behavior and UX.
No visual or functional changes are intended.

Key improvements:

Removes legacy gesture handler usage
Uses shared values instead of implicit context
Aligns with current RNGH + Reanimated best practices
Improves gesture interruption and cancellation handling

FIles Changed
app/containers/AudioPlayer/Seek.tsx

Issue(s)

How to test or reproduce

Screenshots

Types of changes

Bugfix (non-breaking change which fixes an issue)
Improvement (non-breaking change which improves a current function)
New feature (non-breaking change which adds functionality)
Documentation update (if none of the other choices apply)

Checklist

I have read the CONTRIBUTING doc
I have signed the CLA
Lint and unit tests pass locally with my changes
I have added tests that prove my fix is effective or that my feature works (if applicable)
I have added necessary documentation (if applicable)
Any dependent changes have been merged and published in downstream modules

Further comments

This pr does not introduces any visual or functional changes

Summary by CodeRabbit

Refactor
- Updated audio player seek interaction with improved gesture handling and offset tracking for better responsiveness when adjusting playback position.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-05T20:23:30Z

Walkthrough

The Seek component's pan gesture handler is migrated from react-native-gesture-handler's PanGestureHandler API to the newer Gesture/GestureDetector API. A new panOffsetX shared value tracks the base offset at pan start, with position updates clamped to [0, maxWidth] during pan movement, and finalization triggers time change callbacks via runOnJS.

Changes

Cohort / File(s)	Summary
Gesture API Migration `app/containers/AudioPlayer/Seek.tsx`	Replaces deprecated `PanGestureHandler` and `useAnimatedGestureHandler` with `Gesture` and `GestureDetector` APIs. Introduces `panOffsetX` shared value to track offset accumulation during pan gestures. Pan begin captures current `translateX`, pan update clamps position within bounds, and pan finalize resets state and triggers `onChangeTime` callback.

Poem

🐰 A hop, a skip, the gestures flow,
New APIs make the seek bar glow,
Old PanHandlers fade away,
GestureDetector saves the day! ✨

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: replacing a legacy pan handler with a new Gesture API in the audio seekbar component, which aligns with the changeset modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/containers/AudioPlayer/Seek.tsx (1)
67-82: Clean migration to the new Gesture API.

The implementation correctly uses Gesture.Pan() with shared values instead of the legacy context pattern. A few minor observations:

onBegin vs onStart: Using onBegin is appropriate here since you want to capture the initial position immediately when the user touches, not after exceeding the (very small) activeOffsetX threshold.

Optional optimization: scale.value = 1.3 is set on every update frame. You could move it to onBegin for a minor performance improvement:
🔎 Optional: Set scale once in onBegin
 .onBegin(() => {
   isPanning.value = true;
   panOffsetX.value = translateX.value;
+  scale.value = 1.3;
 })
 .onUpdate(({ translationX }) => {
   translateX.value = clamp(panOffsetX.value + translationX, 0, maxWidth.value);
-  scale.value = 1.3;
 })

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 8337ab7 and 13b4396.

⛔ Files ignored due to path filters (1)

app/containers/message/__snapshots__/Message.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

app/containers/AudioPlayer/Seek.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

app/containers/AudioPlayer/Seek.tsx (1)

app/containers/AudioPlayer/constants.ts (2)

ACTIVE_OFFSET_X (13-13)

SEEK_HIT_SLOP (5-5)

🔇 Additional comments (3)

app/containers/AudioPlayer/Seek.tsx (3)

3-3: LGTM!

Correct imports for the new Gesture API from react-native-gesture-handler.

52-52: LGTM!

Using a shared value to track the base offset at pan start is the correct pattern for the new Gesture API, replacing the implicit context from the legacy useAnimatedGestureHandler.

122-124: LGTM!

The GestureDetector wrapper is correctly applied, and hitSlop on the child Animated.View properly extends the touch target area for the thumb.

Rohit3523 · 2026-01-06T15:31:46Z

Duplicate of #6772

divyanshu-patil · 2026-01-09T07:07:45Z

closing this as duplicate of #6772

divyanshu-patil added 2 commits January 6, 2026 01:46

chore: replace legacy pan handler with new Gesture API

e491b38

chore: snapshot update

490654b

divyanshu-patil marked this pull request as ready for review January 5, 2026 20:24

Merge branch 'develop' into chore/panguesture_update

13b4396

coderabbitai bot reviewed Jan 5, 2026

View reviewed changes

Rohit3523 marked this as a duplicate of #6772 Jan 6, 2026

divyanshu-patil closed this Jan 9, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: replace legacy pan handler with new Gesture API in audio seekbar#6884

chore: replace legacy pan handler with new Gesture API in audio seekbar#6884
divyanshu-patil wants to merge 3 commits intoRocketChat:developfrom
divyanshu-patil:chore/panguesture_update

divyanshu-patil commented Jan 5, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Jan 5, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Rohit3523 commented Jan 6, 2026

Uh oh!

divyanshu-patil commented Jan 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

divyanshu-patil commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Issue(s)

How to test or reproduce

Screenshots

Types of changes

Checklist

Further comments

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Poem

Estimated code review effort

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Rohit3523 commented Jan 6, 2026

Uh oh!

divyanshu-patil commented Jan 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

divyanshu-patil commented Jan 5, 2026 •

edited

Loading

coderabbitai bot commented Jan 5, 2026 •

edited

Loading